/*
 * @Description: 设置页面
 * @Author: buwei.huang
 * @Date: 2019-11-04 10:54:46
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-11-20 18:16:10
 */
<template>
  <div id="app">
    <title-bar titleText="设置" />
    <div class="accountSetting_wrap">
      <template v-for="(item,index) in accountList">
        <setting-item
          v-if="isShow(item.needLogin) && !(item.labelName === '检测更新'&& !isAndroid)"
          :key="index"
          :item="item"
          :isBorder="!(index == accountList.length - 1) && !item.marginBottom"
          :class="item.marginBottom ? 'margin_bottom' : ''"
          @click.native="item.typeFnc ? switchFnc(item.typeFnc) : item.url ? goPage(item.url) : ''"
          :appVersion="item.typeFnc == 1 ? appVersion : ''"
        >
          <div
            v-if="appVersion && item.rightText"
            slot="span"
            class="account_item_right_span fontsize28 baseColorNoAcitve"
          >
            {{'V' + appVersion}}
          </div>
        </setting-item>
      </template>
      <div
        class="outLoginBtn fontsize28"
        @click="outLogin"
        v-if="isShowBtn"
      >
        退出登录
      </div>
    </div>

  </div>
</template>

<script>
import SettingItem from './components/SettingItem'
import { UserBeanUtils, isAndroid } from 'vue-xiaobu-utils'
import { TitleBar } from 'vue-xb-ui-depot'
import { outLogin } from './api/api.js'
import ConfirmBox from '@/components/confirm/ConfirmBox.js'

const UPDATE_VERSION = 1 // 检查更新
const CLEAR_CACHE = 2 // 清除缓存

export default {
  name: 'App',
  components: {
    SettingItem,
    TitleBar
  },
  data() {
    return {
      // 配置列表，html配置
      accountList: window.accountList ? window.accountList : [],
      appVersion: '', // 版本号
      isShowBtn: UserBeanUtils.isUserLogin(),
      isAndroid: isAndroid()
    }
  },
  mounted() {
    this.getAppVersionInfo()
    console.log(isAndroid())
  },
  methods: {
    switchFnc(type) {
      switch (type) {
        case UPDATE_VERSION:
          return this.updateVersion()
        case CLEAR_CACHE:
          return this.clearCache()
      }
    },
    // 跳转路由
    goPage(url) {
      console.log('跳转路由:' + url)
      this.$AppRouterUtils.open(url)
    },
    // 获取版本号
    getAppVersionInfo() {
      // 获取版本号
      this.$System.then(System => {
        System.getAppVersionInfo(
          msg => {
            console.log('获取版本号:' + msg)
            let versionInfo = JSON.parse(msg)
            this.appVersion = versionInfo.version
          },
          err => {
            console.log('获取版本号失败', err)
          }
        )
      })
    },
    // 检查更新
    updateVersion() {
      // console.log('检查更新')
      this.$System.then(System => {
        System.checkAppVersion(
          msg => {
            console.log('检查更新成功')
          },
          err => {
            console.log('检查更新失败', err)
          }
        )
      })
    },
    // 清除缓存
    clearCache() {
      // console.log('清除缓存')
      let self = this
      // self.$UI.then(UI => {
      //   UI.showDialog(
      //     '提示',
      //     '确定要清除缓存？',
      //     '确认',
      //     '取消',
      //     msg => {
      //       if (msg == 0) { //eslint-disable-line
      //         self.$System.then(System => {
      //           System.cleanCache(
      //             msg => {
      //               console.log('清空缓存成功')
      //               self.$Toast.then(Toast => {
      //                 Toast.showShortBottom('清空缓存成功')
      //               })
      //             },
      //             err => {
      //               console.log('清除缓存失败', err)
      //               self.$Toast.then(Toast => {
      //                 Toast.showShortBottom('清除缓存失败，请稍后重试')
      //               })
      //             }
      //           )
      //         })
      //       }
      //     },
      //     function (msg) { }
      //   )
      // })
      ConfirmBox.show({
        title: '提示',
        message: '确定要清除缓存？',
        confirmText: '确认',
        cancelText: '取消'
      }).then(() => {
        console.log('点击了确定~')
        self.$System.then(System => {
          System.cleanCache(
            msg => {
              console.log('清空缓存成功')
              // 用户登录的情况不清除登录信息
              let userbeanItem = localStorage.getItem('XIAOBUUSERBEAN')// 获取本地用户登录信息
              let sessionItem = localStorage.getItem('XIAOBUSESSION')// 获取本地用户SESSION
              localStorage.clear()
              if (userbeanItem) {
                localStorage.setItem('XIAOBUUSERBEAN', userbeanItem)
              }
              if (sessionItem) {
                localStorage.setItem('XIAOBUSESSION', sessionItem)
              }
              self.$Toast.then(Toast => {
                Toast.showShortBottom('清空缓存成功')
              })
            },
            err => {
              console.log('清除缓存失败', err)
              self.$Toast.then(Toast => {
                Toast.showShortBottom('清除缓存失败，请稍后重试')
              })
            }
          )
        })
      })
    },
    // 退出登录
    outLogin() {
      console.log('退出登录')
      // this.$UI.then(UI => {
      //   UI.showDialog(
      //     '提示',
      //     '退出当前账号将无法使用云卡！',
      //     '确认退出',
      //     '取消',
      //     msg => {
      //       if (msg == 0) { //eslint-disable-line
      //         outLogin().then(res => {
      //           window.localStorage.removeItem('XIAOBUSESSION')
      //           window.localStorage.removeItem('XIAOBUUSERBEAN')
      //           // 同步ios推送
      //           this.$System.then(System => {
      //             System.syncUnreadMessageCount(
      //               0,
      //               () => {
      //                 console.log('未读总数传递成功')
      //                 this.$AppRouterUtils.goBack()
      //               },
      //               () => {
      //                 console.log('未读总数传递失败')
      //                 this.$AppRouterUtils.goBack()
      //               }
      //             )
      //           })
      //           // this.$AppRouterUtils.goBack()
      //           // window.localStorage.clear()
      //         })
      //       }
      //     },
      //     function (msg) { }
      //   )
      // })
      ConfirmBox.show({
        title: '提示',
        message: '退出当前账号将无法使用云卡！',
        confirmText: '确认退出',
        cancelText: '取消'
      }).then(() => {
        console.log('点击了确定~')
        outLogin().then(res => {
          window.localStorage.removeItem('XIAOBUSESSION')
          window.localStorage.removeItem('XIAOBUUSERBEAN')
          // 同步ios推送
          this.$System.then(System => {
            System.removeCache(
              () => {
                console.log('清除底层缓存sessionID成功')
                this.$AppRouterUtils.goBack()
              },
              () => {
                console.log('清除底层缓存sessionID失败')
                this.$AppRouterUtils.goBack()
              },
              'XIAOBUSESSION'
            )
            System.removeCache(
              () => {
                console.log('清除底层缓存用户信息成功')
                this.$AppRouterUtils.goBack()
              },
              () => {
                console.log('清除底层缓存用户信息失败')
                this.$AppRouterUtils.goBack()
              },
              'XIAOBUUSERBEAN'
            )
            System.syncUnreadMessageCount(
              0,
              () => {
                console.log('未读总数传递成功')
                this.$AppRouterUtils.goBack()
              },
              () => {
                console.log('未读总数传递失败')
                this.$AppRouterUtils.goBack()
              }
            )
          })
          // this.$AppRouterUtils.goBack()
          // window.localStorage.clear()
        })
      })
    },
    // 是否登录来判断组件显示
    isShow(needLogin) {
      if (needLogin) {
        if (UserBeanUtils.isUserLogin()) {
          return true
        } else {
          return false
        }
      } else {
        return true
      }
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
.title-text {
  color: #333;
}
.accountSetting_wrap {
  padding-top: 16px;
  position: relative;
  box-sizing: border-box;
  background-color: #f2f5f6;
}
.margin_bottom {
  margin-bottom: 30px;
}
.account_item_right_span {
  margin-right: 30px;
}
.outLoginBtn {
  width: 690px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 60px;
  background-color: #fff;
  border-radius: 8px;
  color: #333333;
}
</style>
